import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';
import G6 from '@antv/g6';

@Component({
  selector: 'app-relation',
  templateUrl: './relation.component.html',
  styles: [],
})
export class RelationComponent implements OnInit {
  dateRange = [];
  checked = true;
  constructor(private fb: FormBuilder) {}

  g6_form = this.fb.group({
    dateRange: new FormControl(),
    checkedTypeTH: new FormControl(),
    checkedTypeDX: new FormControl(),
    checkedTypeJR: new FormControl(),
    checkedTypeST: new FormControl(),
    checkedEntryGXQ: new FormControl(),
    checkedEntryHLP: new FormControl(),
    searchEntry: new FormControl(),
  });

  ngOnInit() {
    const graph = new G6.Graph({
      container: 'container',
      width: 900,
      height: 700,
      layout: {
        type: 'force',
        preventOverlap: true,
        linkDistance: d => {
          if (d.source.id === 'node0') {
            return 100;
          }
          return 30;
        },
        nodeStrength: d => {
          if (d.isLeaf) {
            return -50;
          }
          return -10;
        },
        edgeStrength: d => {
          if (d.source.id === 'node1' || d.source.id === 'node2' || d.source.id === 'node3') {
            return 0.7;
          }
          return 0.1;
        },
      },
      defaultNode: {
        color: '#5B8FF9',
        style: {
          lineWidth: 2,
          fill: '#C6E5FF',
        },
      },
      defaultEdge: {
        size: 2,
        color: '#e2e2e2',
      },
    });

    const data = {
      nodes: [
        { id: 'node0', size: 100, label: '蔡成功' },
        { id: 'node1', size: 70, label: '侯亮平' },
        { id: 'node2', size: 70, label: '高小琴' },
        { id: 'node6', size: 40, isLeaf: true, label: '通话事件' },
        { id: 'node7', size: 40, isLeaf: true, label: '短信事件' },
        { id: 'node8', size: 40, isLeaf: true, label: '通话事件' },
        { id: 'node9', size: 40, isLeaf: true, label: '短信事件' },
        { id: 'node10', size: 40, isLeaf: true, label: '金融事件' },
        { id: 'node11', size: 40, isLeaf: true, label: '实体碰撞事件' },
      ],
      edges: [
        { source: 'node0', target: 'node1', label: '同学关系' },
        { source: 'node0', target: 'node2', label: '商务关系' },
        { source: 'node1', target: 'node6' },
        { source: 'node1', target: 'node7' },
        { source: 'node2', target: 'node8' },
        { source: 'node2', target: 'node9' },
        { source: 'node2', target: 'node10' },
        { source: 'node2', target: 'node11' },
      ],
    };
    const nodes = data.nodes;
    graph.data({
      nodes,
      edges: data.edges.map((edge, i) => {
        // 可运行，结果无影响
        edge.source = 'edge' + i;
        return { ...edge };
      }),
    });
    graph.render();

    graph.on('node:dragstart', e => {
      graph.layout();
      refreshDragedNodePosition(e);
    });
    graph.on('node:drag', e => {
      refreshDragedNodePosition(e);
    });
    graph.on('node:dragend', e => {
      e.item.get('model').fx = null;
      e.item.get('model').fy = null;
    });

    function refreshDragedNodePosition(e) {
      const model = e.item.get('model');
      model.fx = e.x;
      model.fy = e.y;
    }
  }
  onChange(result: Date): void {
    console.log('onChange: ', result);
  }
  searchAdd() {
    alert('searchAdd');
  }
}
